<template>
  <div class="app-container" style="margin: 0 !important;">
    <div class="top-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" style="display: block !important;">
        <el-form-item label="模板名称：">
          <el-input v-model.trim="formInline.templateName" clearable size="small" placeholder="模板名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" plain icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button icon="el-icon-plus" type="primary" size="small" @click="addSMS">新增</el-button>
      <!-- <el-button icon="el-icon-plus" type="primary" size="medium" @click="addcusSMS">新增客户下单成功提示语</el-button> -->
    </div>
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        style="width: 99%">
        <el-table-column
          prop="templateName"
          label="模板名称"
          align="center"
          width="230px"
        >
        </el-table-column>
        <el-table-column
          prop="templateContent"
          label="模板内容"
          align="center"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="130"
        >
          <template slot-scope="scope">
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
            <el-button
              type="text"
              size="small"
              icon="el-icon-edit"
              @click="handleClick(scope.row)"
            >编辑</el-button>
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              icon="el-icon-delete"
              size="small"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="formInline.page" :limit.sync="formInline.size"
      @pagination="getList"/>
    </div>
    <!-- 新增 -->
    <el-dialog
      title="添加短信模板"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="模板名称" prop="templateName">
          <el-input type="textarea" v-model.trim="ruleForm.templateName" maxlength="50" show-word-limit autosize :readonly="addcusSMSFlag ? true : false" class="templateStyle"></el-input>
        </el-form-item>
        <el-form-item label="模板内容" prop="templateContent">
          <el-input type="textarea" v-model.trim="ruleForm.templateContent" autosize maxlength="200" show-word-limit class="templateStyle"></el-input>
        </el-form-item>
        <el-form-item>
        <el-button @click="cancelForm('ruleForm')">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  saveOrUpdateSmsTemplate,// 添加/修改短息模版
  deleteSmsTemplate,// 删除短息模版
  getSmsTemplatePageInfo, // 分页获取短息模版记录
} from '@/api/SMS';
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: {
    Pagination
  },
  data() {
    return {
      formInline: {
        templateName: '',
        page: 1,
        // limit: 10,
        size: 10
      },
      // tableData: [{
      //   templateName: '客户不在要求放到门口',
      //   templateContent: '您好，蛋糕已按您的需求放在门口，请尽快放置冰箱4度冷藏，常温下放置不能超30分钟，夏天时间更短，感谢您的支持',
      // }, {
      //   templateName: '客户不在要求放到门口',
      //   templateContent: '您好，蛋糕已按您的需求放在门口，请尽快放置冰箱4度冷藏，常温下放置不能超30分钟，夏天时间更短，感谢您的支持',
      // }, {
      //   templateName: '客户不在要求放到门口',
      //   templateContent: '您好，蛋糕已按您的需求放在门口，请尽快放置冰箱4度冷藏，常温下放置不能超30分钟，夏天时间更短，感谢您的支持',
      // }, {
      //   templateName: '客户不在要求放到门口',
      //   templateContent: '您好，蛋糕已按您的需求放在门口，请尽快放置冰箱4度冷藏，常温下放置不能超30分钟，夏天时间更短，感谢您的支持',
      // }, {
      //   templateName: '客户不在要求放到门口',
      //   templateContent: '您好，蛋糕已按您的需求放在门口，请尽快放置冰箱4度冷藏，常温下放置不能超30分钟，夏天时间更短，感谢您的支持',
      // }],
      tableData: [],
      total: 5,
      dialogVisible: false,
      ruleForm: {
        id: '',
        templateName: '',
        templateContent: ''
      },
      rules: {
        templateName: [
          { required: true, message: '请输入模板名称', trigger: 'blur' }
        ],
        templateContent: [
          { required: true, message: '请填写模板内容', trigger: 'blur' }
        ]
      },
      addcusSMSFlag: false, // 新增客户下单成功提示语标记
      Loading: true,
      delArray: {
        ids: []
      }
    }
  },
  watch: {
    'dialogVisible'() {
      if(this.dialogVisible) {
        window.removeEventListener("keydown",this.keyupEnter);
      } else {
        window.addEventListener("keydown",this.keyupEnter);
      }
    },
  },
  mounted() {
    this.getList();
    window.addEventListener("keydown",this.keyupEnter);
  },
  methods: {
    onSubmit() {
      this.formInline.page=1;
      this.getList();
    },
    getList() {
      this.Loading = true;
      getSmsTemplatePageInfo(this.formInline).then(res => {
        this.total = res.data.data.total;
        this.tableData = res.data.data.rows;
        // setTimeout(() => {
        //   this.Loading = false;
        // },0.5 * 1000)
      }).catch(error => {
        console.log(error)
      })
    },
    //新增关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          this.$refs['ruleForm'].resetFields();
          this.ruleForm.templateContent = '';
          done();
        })
        .catch(() => {});
    },
    //新增
    addSMS(done) {
      this.dialogVisible = true;
      this.ruleForm.templateName = '';
      this.addcusSMSFlag = false;
    },
    //新增客户下单成功提示语
    addcusSMS(done) {
      this.dialogVisible = true;
      this.ruleForm.templateName = '客户下单成功提示语';
      this.addcusSMSFlag = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveOrUpdateSmsTemplate(this.ruleForm).then(res => {
            this.getList();
            this.dialogVisible = false;
            this.$message.success("操作成功");
            this.$refs['ruleForm'].resetFields();
          }).catch(error => {
            console.log(error)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    cancelForm(formName) {
      // this.$refs[formName].resetFields();
      this.ruleForm.templateName = '';
      this.ruleForm.templateContent = '';
      this.dialogVisible = false;
    },
    // 短信编辑
    handleClick(row) {
      this.dialogVisible = true;
      this.ruleForm.id = row.id;
      this.ruleForm.templateName = row.templateName;
      this.ruleForm.templateContent = row.templateContent;
      // console.log(row);
    },
    // 短信删除
    deleteRow(index,rows) {
      this.delArray.ids = rows[index].id;
      deleteSmsTemplate(this.delArray).then(res => {
        this.getList();
        this.$message.success("删除成功");
        rows.splice(index, 1);
      }).catch(error => {
        console.log('error',error)
      })
    },
    // 回车事件
    keyupEnter(){
      if(window.event.keyCode == 13 ){
        this.onSubmit();// 查询事件
      }
    },
  },
  destroyed() {
    window.removeEventListener("keydown",this.keyupEnter);
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
    window.addEventListener("keydown",this.keyupEnter);
  },
  deactivated() {
    window.removeEventListener("keydown",this.keyupEnter);
  }
}
</script>

<style lang="scss">
.app-container {
  .top-container {
    padding: 20px 10px 10px 20px;
  }
  .table-container {
    padding-left: 20px;
    .el-table__row {
      td {
        border-right: 1px solid #dfe4ed !important;
      }
    }
  }
}
.templateStyle {
  .el-input__count {
    height: 25px;
    line-height: 25px;
    bottom: 1px;
  }
}
.templateStyle {
  textarea {
    padding-right: 50px;
  }
}
// 去掉输入框textarea的斜杠
.el-form-item .el-form-item__content .el-textarea textarea {
  resize: none;
}
</style>
